<!-- 封装上传照片组件 -->
<template>
  <div class="box">
    <a-upload :show-upload-list="false" :customRequest="upload" name="avatar" list-type="picture-card"
      class="avatar-uploader">
      <img v-if="img" :src="img" class="avatar" alt="avatar" />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text">上传</div>
      </div>
    </a-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
import API from '@/api/survey'

defineProps(['img'])
const emit = defineEmits(['update:img'])
const loading = ref(false)

const upload = async (file) => {
  loading.value = true
  const formData = new FormData()
  formData.append('files', file.file)
  formData.append('isdev', 'qf')
  const { data } = await API.upLoad(formData)
  emit('update:img', data.url)
  loading.value = false
}

</script>


<style scoped>
.avatar-uploader>.ant-upload {
  width: 128px;
  height: 128px;
  display: block;
  align-items: center;
  justify-content: center;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.avatar {
  width: 100%;
  height: 100%;
  /* border-radius: 50%; */
}

.box {
  width: 100%;
  display: inline;
}
</style>

<style>
:where(.css-dev-only-do-not-override-185kyl0).ant-upload-wrapper.ant-upload-picture-card-wrapper {
  display: table-caption;
}
</style>